<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加车辆信息</title>
    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
    <nav th:replace="~{system/sys/sys_topbar::top}"></nav>
    <form class="form-inline" action="/car_add_after" method="post">
        <input type="hidden" name="carId">
        <div class="container" style="padding-top: 20px">
            <div class="row form-group" style="padding-left: 20rem">
                <label for="carNumber" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    车牌号
                </label>
                <input type="text" name="carNumber" class="form-control" id="carNumber" placeholder="请输入车牌号" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    车辆类型
                </label>
                <input type="text" name="carType" class="form-control" id="carType" placeholder="请输入车辆类型" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="carLength" style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    车长（米）
                </label>
                <input type="text" name="carLength" class="form-control" id="carLength" placeholder="请输入车长" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    车载重（吨）
                </label>
                <input type="text" name="carLoad" class="form-control" id="carLoad" placeholder="请输入车载重" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="carBelong" style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    车主
                </label>
                <input type="text" name="carBelong" class="form-control" id="carBelong" placeholder="请输入车主" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    常驻地
                </label>
                <select style="width: 50rem; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="carPlaceProvince" id="province">
                    <option >请选择</option>
                </select>
                <select style="width: 50rem; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="carPlaceCity" id="city">
                    <option >请选择</option>
                </select>
                <select style="width: 50rem; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="carPlaceCountry" id="country">
                    <option >请选择</option>
                </select>
                <!--<input hidden="hidden" name="carPlace" id="carPlace">-->
                <!--<input th:value="${carInfo.carPlace}" type="text" name="carPlace" class="form-control" id="carPlace" placeholder="请输入常驻地" style="width: 50rem">-->
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        </div>
        <div class="container">
            <div class="row text-center">
                <button type="submit" class="btn btn-primary" style="margin-right: 50px; width: 90px; margin-bottom: 40px">确认添加</button>
                <a ><button type="button" class="btn btn-primary" style="margin-right: 50px; width: 90px; margin-bottom: 40px">返回</button></a>
            </div>
        </div>

    </form>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    $(function () {
        ProvinceBind();

        $("#province").change(function () {
            CityBind();
        })

        $("#city").change(function () {
            CountryBind();
        })
    })
    function ProvinceBind() {
        // $("#province").html("");
        var str = "<option> 请选择省 </option>";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind() {
        $("#city").html("");
        var options = $("#province option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city").html("");
        var str="<option> 请选择市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind() {
        $("#country").html("");
        var options = $("#city option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country").html();
        var str="<option> 请选择县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country").append(str);
            },
            // error: function () {
            //     alert("Error县");
            // }
        });
    }

    function getCarPlace() {
        var getProvince = $("#province option:selected").text();
        var getCity = $("#city option:selected").text();
        var getCountry = $("#country option:selected").text();
        if (getProvince == " 请选择省 ")
            getProvince = "";
        if (getCity == " 请选择市 ")
            getCity = "";
        if (getCountry == " 请选择县 ")
            getCountry = "";
        var getCarPlace = getProvince+getCity+getCountry;
        $("#carPlace").val(getCarPlace);
    }
</script>

</body>
</html>